<template>
  <div>
    <div class="flex-row">
      <div class="tab-item">
        教学类未完成 {{ unCompleteData.jxks }}人
      </div>
      <div class="tab-item">
        教科研未完成 {{ unCompleteData.jkyjf }}人
      </div>
      <div class="tab-item">
        教科研建设未完成 {{ unCompleteData.jkyjsjf }}人
      </div>
      <div class="tab-item">
        管理与服务未完成 {{ unCompleteData.glyggfwjf }}人
      </div>
    </div>
    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
      <template #toolbar>
        <a-button @click="aoaToExcel"> 导出</a-button>
      </template>
    </BasicTable>



  </div>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';
import {BasicTable, TableAction, useTable} from '/@/components/Table';
import { queryComplete, queryUnCompleteCount} from '/@/api/taskCenter/taskCenter';
import {useModal} from '/@/components/Modal';
import {columns, searchFormSchema} from './schema.data';
import {usePermission} from '/@/hooks/web/usePermission';
import {aoaToSheetXlsx} from "/@/components/Excel";
import {message} from "ant-design-vue";
export default defineComponent({
  name: 'TaskUserComplete',
  components: {BasicTable, TableAction},
  setup() {
    const unCompleteData = ref('');

    const {hasPermission} = usePermission();
    const [registerModal,] = useModal();
    const [registerTable, {getDataSource, getColumns}] = useTable({
      title: '用户任务完成情况统计',
      api: queryComplete,
      columns,
      formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
      },
      isTreeTable: true,
      pagination:{
        pageSize: 10,
        pageSizeOptions:['10', '20', '50', '100', '500']
      },
      striped: false,
      useSearchForm: true,
      showTableSetting: true,
      bordered: true,
      showIndexColumn: false,
      canResize: false,
      // actionColumn: {
      //   title: '操作',
      //   dataIndex: 'action',
      //   slots: {customRender: 'action'},
      //   fixed: 'right',
      //   ifShow: true,
      // },
    });

    queryUnCompleteCount().then(res => {
      unCompleteData.value = res[0]
    })

    async function aoaToExcel() {
      let headersTitle = getColumns().filter(f => !f.defaultHidden).map(f => f.title);
      headersTitle.splice(headersTitle.length - 1, 1);
      let headersKey = getColumns().filter(f => !f.defaultHidden).map(f => f.dataIndex);
      headersKey.splice(headersKey.length - 1, 1);
      let outData = getDataSource().map((f) => {
        return headersKey.map((key) => {
          let data = f[key!] ?? '';
          if (key === 'complete') {
            console.log('complete data', data)
            const tab = ['未完成', '部分完成', '超量完成']
            data = tab[data - 1];
          }
          if (key === 'jxkscl') {
            const max = f.jxks_full_mark;
            const abs = f.jxks - max===0?'':f.jxks - max > 0 ? '+' : '-'
            data = `${abs}${Math.abs(f.jxks - max)}`
          }
          if (key === 'jkyjfcl') {
            const max =  f.jkyjf_full_mark;
            const abs = f.jkyjf - max===0?'':f.jkyjf - max > 0 ? '+' : '-'
            data = `${abs}${Math.abs(f.jkyjf - max)}`
          }
          if (key === 'jkyjsjfcl') {
            const max =  f.jkyjsjf_full_mark;
            const abs = f.jkyjsjf - max===0?'':f.jkyjsjf - max > 0 ? '+' : '-'
            data = `${abs}${Math.abs(f.jkyjsjf - max)}`
          }
          if (key === 'glyggfwjfcl') {
            const max =  f.glyggfwjf_full_mark;
            const abs = f.glyggfwjf - max===0?'':f.glyggfwjf - max > 0 ? '+' : '-'
            data = `${abs}${Math.abs(f.glyggfwjf - max)}`
          }
          return data;
        });
      })
      // 保证data顺序与header一致
      aoaToSheetXlsx({
        data: outData,
        header: headersTitle,
        filename: '教师任务完成统计表' + new Date().getTime() + '.xlsx',
      });
    }

    return {
      unCompleteData,
      aoaToExcel,
      registerTable,
      registerModal,
      hasPermission,
    };
  },
});
</script>
<style scoped lang="less">
.flex-row {
  display: flex;
  align-items: center;
  padding: 12px 28px 0 28px;
  box-sizing: border-box;
  width: 100%;

  .tab-item {
    margin-right: 20px;
  }
}
</style>
